<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <back-top>
        <canvas style="position: fixed;" id="canvas">
        </canvas>
        <div style="position: relative;">
          <router-view/>
        </div>
      </back-top>
      <!--    <router-view v-slot="{ Component }">-->
      <!--      <keep-alive>-->
      <!--        <component :is="Component" />-->
      <!--      </keep-alive>-->
      <!--    </router-view>-->
    </div>
  </a-config-provider>

</template>
<script setup>
import {onMounted} from "vue";
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

const locale = zhCN

//全局设置黑客背景
const hackerBg = () => {
  window.onload = function () {
    const canvas = document.getElementById("canvas");
    // getContext() 方法返回一个用于在画布上绘图的环境。
    const context = canvas.getContext("2d");
    const W = screen.availWidth
    const H = screen.availHeight
    canvas.width = W;
    canvas.height = H;
    const fontSize = 15;
    const columns = Math.floor(W / fontSize);
    const drops = [];
    for (let i = 0; i < columns; i++) {
      drops.push(0);
    }
    const str = "01abcdefghijklmnopqurstuvwxyz";

    function draw() {
      //让背景逐渐由透明到不透明
      context.fillStyle = "rgba(0,0,0,0.05)";
      context.fillRect(0, 0, W, H);
      //给字体设置样式
      //context.font = "700 "+fontSize+"px  微软雅黑";
      context.font = fontSize + 'px arial';
      //给字体添加颜色
      context.fillStyle = "rgb(50, 113, 167)";//随意更改字体颜色
      //写入图形中
      for (let i = 0; i < columns; i++) {
        const index = Math.floor(Math.random() * str.length);
        const x = i * fontSize;
        const y = drops[i] * fontSize;
        context.fillText(str[index], x, y);
        //如果要改变时间，肯定就是改变每次他的起点
        if (y >= canvas.height && Math.random() > 0.92) {
          drops[i] = 0;
        }
        drops[i]++;
      }
    }

    draw();
    setInterval(draw, 33);

  };
}

onMounted(() => {
  hackerBg()
  // live2dw 看板娘
  setTimeout(() => {
    window.L2Dwidget.init({
      pluginRootPath: '/live2dw/',
      pluginJsPath: 'lib/',
      pluginModelPath: 'live2d-widget-model-koharu/assets/',
      tagMode: false,
      debug: false,
      model: {jsonPath: '/live2dw/live2d-widget-model-koharu/assets/koharu.model.json'},
      display: {
        position: 'right',
        width: 200,
        height: 400,
        scale: 1 //缩放比例
      },  //调整大小,和位置
      mobile: {
        show: true, //手机端是否显示
        scale: 1
      },
      react: {
        opacity: 1 //模型不透明度
      },
      log: false,
    })
  }, 1000)
})
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100%;
}

body {
  cursor: url(@/assets/img/special/miku1.png), auto;
}

a {
  text-decoration: none;
  color: #000000 !important;
  cursor: url(@/assets/img/special/miku2.png), auto !important;
}

p::selection {
  background: red;
  color: #f00;
}
</style>